<script>
import { groupTree } from "@/api/user";
export default {
  name: "index.vue",
  data() {
    return {
      deptTree: [],
    };
  },
  mounted() {
    groupTree().then((res) => {
      this.deptTree = res.data;
      this.$emit("onLoad", this.deptTree)
    });
  },
  methods: {
    setCurrentKey(key) {
        // key为path
        this.$nextTick(()=>{
            this.$refs['tree'].setCurrentKey(key)
        })
    },
    deptChange(e) {
      const group = {
        groupId: e.id,
        groupPath: e.path,
        groupName: e.name,
      };
      this.$emit("change", group);
    },
  },
};
</script>

<template>
  <el-tree class="over-scroll tree-box" ref="tree" node-key="path" :data="deptTree" :props="{ label: 'alias', children: 'children' }" :default-expand-all="true" :highlight-current="true" :check-on-click-node="true" :expand-on-click-node="false" @node-click="deptChange">
    <div class="custom-tree-node" slot-scope="{ node, data }">
      <div>{{ node.label }}</div>
    </div>
  </el-tree>
</template>

<style scoped lang="scss">
</style>
